<template>
  <div class="center-cmp">
    <div class="cc-container">
      <div class="cc-header">
        当日区间数据情况
      </div>
      <dv-charts class="cccharts" :option="option" />
    </div>
  </div>
</template>
<script>
import {dayIntervalData} from "@/network/home"
let option = {
  legend:{
    data:[
      // {name:'时间开动率',color:'#00baff'},
      // {name:'速度开动率',color:'#ff5ca9'},
      // {name:'合格率',color:'#f5d94e'},
      // {name:'性能开动率',color:'#fff'},
      // {name: 'OEE',color: '#D7001E'}
    ],
    textStyle:{
      fill:'#fff'
    }
  },
  xAxis:{
    data:[],
    // data:['8:00','9:00','10:00','11:00','12:00','13:00','14:00','15:00','16:00','17:00','18:00','19:00','20:00','21:00'],
    axisLine:{//坐标轴 轴线相关设置。
      style:{
        stroke:'#999' //Stroke属性定义一条线，文本或元素轮廓颜色(可以理解为border)
      }
    },
    axisLabel:{//坐标轴 刻度标签的相关设置。
      style:{
        fill:'#999', //形状轮廓内的填充
        fontSize:'16px'
      }
    },
    axisTick:{//坐标轴 刻度相关设置。
      show:true
    }
  },
  yAxis:{
    data:'value',
    splitLine:{//坐标轴在 grid 区域中的分隔线。
      show:true,
      style: {
        lineDash: [3, 3],
      },
    },
    axisLine:{
      style:{
        stroke:'#999',
      }
    },
    axisLabel:{
      style:{
        fill:'#999',
        fontSize:'16px'
      },
      formatter:'{value}%'
    },
    axisTick:{//坐标轴 刻度相关设置。
      show:true
    },
    min:0,
    max:100,
    // interval:20,
  },
  series:[
    // {
    //   name:'时间开动率',
    //   data:[],
    //   // data:[10,80,100,21,17,20,12,10,18,38,80,56,87,70],
    //   type:'bar',
    //   barStyle:{
    //     fill:'rgb(0,186,255)',
    //     stroke:'rgb(0,186,255)'
    //   }
    // },
    // {
    //   name:'OEE',
    //   data:[20,62,80,78,65,88,86,84,62,98,88,100,88,92],
    //   type:'line',
    //   lineArea:{
    //     show:true,
    //     gradient:['rgba(215,0,30,.8)','rgba(215,0,30,.2)']
    //   },
    //   lineStyle:{
    //     stroke:'#D7001E'
    //   },
    //   linePoint:{
    //     radius:4,
    //     style:{
    //       fill:'#D7001E',
    //       stroke:'#f00'
    //     }
    //   }
    // }    
  ]
}
export default {
  name:'CenterCmp',
  props:{
    stationId: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      timer:null,
      option:{}
    }
  },
  watch:{
    stationId: function(){
      if(this.stationId > 0 ) this.getlist()
    }
  },
  beforeDestroy() {
    //清除定时器
    clearInterval(this.timer);
    console.log("beforeDestroy");
    this.option = {};
  },
  destroyed() {
    //清除定时器
    clearInterval(this.timer);
    console.log("destroyed");
    this.option = {};
  },
  mounted() {
    this.getDayIntervalData();
    this.getlist()
  },
  methods: {
    getlist(){
      let num = 0;
      //创建并执行定时器
      this.timer = setInterval(() => {
        this.getDayIntervalData();
        //当num等于100时清除option 
        if (num % 10 == 0) {
          this.option = {};
        }
        num++;
      }, 10000);
    },
    getDayIntervalData(){
      dayIntervalData({stationId:this.stationId}).then(res => {
        this.option = {};
        if( res.data.data.length === 0 ) return ;
        let data = res.data.data,time = [],name = [],send = {},ser = [],oee = [];
        // 1：获取x轴时间数据
        data.forEach((el) => {
          //获取柱子的数据
          for(let key in el){
            if(!send[key]) send[key] = [];
            if(key=="dateFormat" || key=="standardOutput"){
                send[key].push(el[key])
            }else{
              let f = parseFloat(Number(el[key]));
              send[key].push( f )
            }
          }
        });        
        //2:处理时间数据
        send.dateFormat.forEach((item) => time.push((item.split(" ")[1]+":00")))       
        for(let i in send){
          if(i=="dateFormat" || i=="standardOutput") continue;
          if(i == 'oee'){
            name.push({name: i})
            oee.push({
              name:i,
              data:send[i],
              type:'line',
              lineArea:{
                show:true,
                gradient:['rgba(255,219,92,.8)','rgba(255,219,92,.2)']
              },
              label: {
                show: true,
                formatter:"{value}%"
              },
              // lineStyle:{
              //   stroke:'#D7001E' 
              // },
              linePoint:{
                radius:4
                // style:{
                //   fill:'#D7001E',
                //   stroke:'#f00'
                // }
              }
            })
          }else{          
            let n = this.getName(i)
            name.push({name: n})
            ser.push({
              name:n,
              data: send[i],
              type:'bar',
              label:{
                show: true,
                formatter:"{value}%"
              }
            })
          }        
        }
        this.$nextTick(()=>{
          option.legend.data = name;
          option.xAxis.data = time;
          option.series = [...ser, ...oee];
          this.option = option;
        })
      })
    },
    getName(name){
      switch(name){
        case 'operational_efficiency' : return '速度开动率'
        case 'performance_efficiency' : return '性能开动率'
        case 'quality_rate' : return '合格品率'
        case 'time_efficiency' : return '时间开动率'
      }
    }
  }  
}
</script>
<style lang="less">
.center-cmp{
  width: 100%;
  height: 100%;
  margin: 0px;
  padding: 0px;
  display: flex;
  flex-direction: column;
  flex-grow: 0;

  .cc-container{
    height: 100%;
    display: flex;
    flex-direction: column;

    .cc-header{
      display: flex;
      justify-content: center;
      align-items: center;
      padding-top: 20px;
      box-sizing: border-box;
      font-size: 20px;
      color: #3BC5EC;
      font-weight: 700;
    }

    .cccharts{
      width: 100%;
      height: 88%;
    }

  }
}
</style>
